<template>
  <div v-loading="goodsLoading">
    <div class="sticky left-0 top-0">
      <div class="overflow-y-hidden flex items-center relative my-0.2em no-scrollbar border-b">
        <div class="sticky left-0 top-0 min-w-2rem flex flex-center bg-white" @click="selectTarget">
          <img src="../../assets/image/more.png" class="w-2rem h-2rem" />
        </div>
        <div class="flex flex-shrink-0">
          <div
            class="px-0.3rem border rounded border-primary ml-1rem text-primary"
            v-for="node in targetList"
            :key="node.id"
            :class="targetId === node.id ? 'bg-primary !text-white' : ''"
            @click="selectTargetId(null, node.id)"
          >
            {{ node.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="w-full flex flex-col border-b" v-for="item in goodsList" :key="item.id">
      <div class="flex flex-col p-1rem" @click="toPath('/goods?id=' + item.id)">
        <span>{{ item.goodsName }}</span>
        <div class="flex mt-0.5rem">
          <div class="bg-[#eee] flex flex-center w-30vw h-30vw mr-1rem">
            <van-image :src="item?.goodsChannelSpuDesc?.mainImages" :fit="'cover'" />
          </div>
          <div class="flex flex-col flex-1">
            <div>
              <div
                class="line-clamp-2"
                v-for="(node, index) in JSON.parse(item?.goodsChannelSpuDesc?.paraItems)"
              >
                <span class="font-bold lh-[1rem]">{{ node.text }}:</span>
                <span class="lh-[1rem]">
                  {{ node.value }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-0.2rem mt-0.5rem">
          <div class="bg-primary flex flex-center py-0.5rem text-white rounded-5px">
            查看联系电话
          </div>
          <div
            class="border border-primary flex flex-center py-0.5rem text-primary rounded-5px"
            @click="toPath(`/company?id=${item.companyId}`)"
          >
            前往企业页面
          </div>
        </div>
      </div>
    </div>
    <van-empty image="search" description="暂无商品" v-show="goodsList.length === 0" />
    <el-drawer v-model="showPopup" :size="'80%'" :show-close="true" direction="ltr">
      <div class="flex flex-col px-1rem">
        <div
          class="text-1.2rem font-bold text-black"
          v-for="node in categoryList"
          :key="node.id"
          @click="targetList = node.children"
        >
          {{ node.name }}
          <div class="flex flex-wrap py-0.5rem">
            <div
              class="p-0.5rem border rounded border-primary mr-1rem my-0.5rem text-0.8rem text-primary"
              :class="targetId === item.id ? 'bg-primary !text-white' : ''"
              v-for="item in node.children"
              :key="item.id"
              @click="selectTargetId(node, item.id)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { onActivated, ref, reactive, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useConfigStore } from '@/stores/config'
import { getGoodsListByCategory } from '@/api/goods'
import { load } from '@amap/amap-jsapi-loader'

const router = useRouter()
const configStore = useConfigStore()
const route = useRoute()
const backToTop = inject('toTop')
const categoryList = ref([])
const targetList = ref([])
const showPopup = ref(false)
const goodsLoading = ref(false)
const targetId = ref()
const goodsList = ref([])
const goodsParams = reactive({
  current: 1,
  size: 5,
})
const toPath = (path) => {
  backToTop()
  router.push(path)
}

const selectTarget = () => {
  showPopup.value = true
}

const selectTargetId = (target, id) => {
  if (target) targetList.value = target.children
  targetId.value = id
  showPopup.value = false
  goodsParams.current = 1
  filterGoods()
}

const init = () => {
  configStore.initChainTree().then((res) => {
    categoryList.value = res
    if (route.query.id1) {
      targetList.value = categoryList.value.find((item) => item.id === route.query.id1).children
      if (route.query.id2) {
        targetId.value = route.query.id2
      } else {
        targetId.value = targetList.value?.[0]?.id
      }
    } else {
      targetList.value = categoryList.value?.[0].children
    }
    filterGoods()
  })
}

const filterGoods = () => {
  goodsLoading.value = true
  getGoodsListByCategory({
    ...goodsParams,
    categoryId: targetId.value,
  })
    .then((res) => {
      if (res.code === 20000) {
        goodsList.value = res.data.records
        console.log(goodsList.value)
      }
    })
    .finally(() => {
      goodsLoading.value = false
    })
}

init()

onActivated(() => {
  init()
})
</script>

<style lang="scss" scoped>
:deep .el-drawer__header {
  background-color: white;
}
</style>
